<template>
	<view>
		<!-- 背景+用户基本信息 -->
		<user-space-head :userinfo="userinfo"></user-space-head>
		
		<!-- 统计 -->
		<view class="user-space-data">
			<home-data :homedata="homedata"></home-data>
		</view>
		<view style="height: 20upx; background-color: #F4F4F4;"></view>
		
		<!-- tab 导航 -->
		<swiperTabHead :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap" scrollItemStyle="width:33.33%;" scrollStyle="border-bottom:0;">
		</swiperTabHead>
		
		<block v-for="(item,index) in tablist" :key="index">
			<template v-if="tabIndex == 0 && index == 0">
				<!-- 主页 -->
				<user-space-userinfo :userinfo="userinfo"></user-space-userinfo>
			</template>
			<template v-else-if="tabIndex==index">
				<!-- 列表 -->
				<block v-for="(item1, index1) in item.list" :key="index1">
					<common-list :item="item1" :index="index1"></common-list>
				</block>
				<!-- 上拉加载 -->
				<loadMore :loadtext="item.loadtext"></loadMore>
			</template>
		</block>
		
		<!-- 操作菜单 -->
		<user-space-popup :show="show" 
			@hide="togleShow" 
			@lahei="lahei" 
			@beizhu="beizhu">
		</user-space-popup>
	</view>
</template>

<script>
	import userSpaceHead from "../../components/user-space/user-space-head.vue";
	import homeData from '../../components/home/home-data.vue';
	import swiperTabHead from '../../components/common/swiper-tab-head.vue';
	import userSpaceUserinfo from '../../components/user-space/user-space-userinfo.vue';
	import commonList from '../../components/common/common-list.vue'
	import loadMore from '../../components/common/load-more.vue';
	import userSpacePopup from '../../components/user-space/user-space-popup.vue';
	
	export default {
		components:{
			userSpaceHead,
			homeData,
			swiperTabHead,
			userSpaceUserinfo,
			commonList,
			loadMore,
			userSpacePopup
		},
		data() {
			return {
				show:false,
				userinfo:{
					bgimg:1,
					userpic:"../../static/demo/userpic/14.jpg",
					username:"昵称",
					sex:1,
					age:23,
					isguanzhu:true,
					regtime:"2019-12-11",
					id:"1234",
					birthday:"1987-02-19",
					job:"IT",
					qg:"未婚",
					path:"广东广州"
				},
				homedata:[
					{name:"嗷嗷",num:20},
					{name:"关注",num:20},
					{name:"粉丝",num:20},
				],
				tabBars: [
					{name: "主页",id: "zhuye"},
					{name: "糗事",id: "qiushi"},
					{name: "动态",id: "dongtai"},
				],
				tabIndex: 0,
				tablist: [{},{
					loadtext: "上拉加载更多",
					list: [{
							userpic: "../../static/demo/userpic/1.jpg",
							username: "昵称",
							isguanzhu: false,
							title: "我是标题",
							type: "img", //img:图文 video: 视频
							titlepic: "../../static/demo/datapic/11.jpg",
							infoNum: {
								index: 1, //0 - 没有操作, 1 - 顶, 2 - 踩
								dingNum: 11,
								caiNum: 12,
							},
							commentNum: 12,
							shareNum: 123
						},
						{
							userpic: "../../static/demo/userpic/1.jpg",
							username: "昵称",
							isguanzhu: true,
							title: "我是标题",
							type: "video", //img:图文 video: 视频
							titlepic: "../../static/demo/datapic/11.jpg",
							playNum: "20w",
							long: "2:47",
							infoNum: {
								index: 2, //0 - 没有操作, 1 - 顶, 2 - 踩
								dingNum: 1,
								caiNum: 14,
							},
							commentNum: 12,
							shareNum: 123
						}
					]
				}, {
					loadtext: "上拉加载更多",
					list: [{
							userpic: "../../static/demo/userpic/2.jpg",
							username: "昵称",
							isguanzhu: false,
							title: "我是标题",
							type: "img", //img:图文 video: 视频
							titlepic: "../../static/demo/datapic/12.jpg",
							infoNum: {
								index: 1, //0 - 没有操作, 1 - 顶, 2 - 踩
								dingNum: 11,
								caiNum: 12,
							},
							commentNum: 12,
							shareNum: 123
						},
						{
							userpic: "../../static/demo/userpic/2.jpg",
							username: "昵称",
							isguanzhu: true,
							title: "我是标题",
							type: "video", //img:图文 video: 视频
							titlepic: "../../static/demo/datapic/11.jpg",
							playNum: "20w",
							long: "2:47",
							infoNum: {
								index: 2, //0 - 没有操作, 1 - 顶, 2 - 踩
								dingNum: 1,
								caiNum: 14,
							},
							commentNum: 12,
							shareNum: 123
						}
					]
				}]
			}
		},
		//上拉触底事件
		onReachBottom() {
			this.loadmore();
		},
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				this.togleShow();
			}
		},
		methods: {
			togleShow(){
				this.show = !this.show;
			},
			lahei(){
				console.log("拉黑");
				this.togleShow();
			},
			beizhu(){
				console.log("备注");
				this.togleShow();
			},
			//tabbar点击事件
			tabtap(index) {
				this.tabIndex = index;
			},
			loadmore() {
				if (this.tabIndex == 0) {
					return;
				}
				if (this.tablist[this.tabIndex].loadtext != "上拉加载更多") {
					return;
				}
				this.tablist[this.tabIndex].loadtext = "加载中";
				setTimeout(() => {
					//获取完成
					let obj = {
						userpic: "../../static/demo/userpic/2.jpg",
						username: "昵称",
						isguanzhu: false,
						title: "我是标题",
						type: "img", //img:图文 video: 视频
						titlepic: "../../static/demo/datapic/12.jpg",
						infoNum: {
							index: 1, //0 - 没有操作, 1 - 顶, 2 - 踩
							dingNum: 11,
							caiNum: 12,
						},
						commentNum: 12,
						shareNum: 123
					};
					this.tablist[this.tabIndex].list.push(obj);
					this.tablist[this.tabIndex].loadtext = "上拉加载更多";
				}, 1000)
			},
		}
	}
</script>

<style >
	.user-space-margin {
		margin: 15upx 0;
	}
	
	.user-space-data {
		background-color: #FFFFFF;
		/* background-color: red; */
		position: relative;
		z-index: 10;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		top: -20upx;
	}
	
</style>
